<template>
  <div>
    <el-input
      v-model="input"
      @input="ser"
      clearable
      style="width: 240px; margin-right: 20px"
      placeholder="请输入相关部门的名称"
    />
    <el-button type="primary" @click="dialogTableVisible = true"
      >添加</el-button
    >
    <el-button type="danger" @click="remove">删除</el-button>
    <!-- 添加弹出框 -->
    <el-dialog v-model="dialogTableVisible" title="请添加您的相关信息：">
      <div class="demo-date-picker">
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker
            v-model="penson.date"
            type="date"
            placeholder="请选择你的日期"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
          />
        </div>
      </div>
      部门:
      <el-select
        v-model="penson.department"
        class="m-2"
        placeholder="请选择部门"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        /> </el-select
      ><br />
      数量:
      <el-input-number v-model="penson.quantity" :min="min" />
      <br />
      分类:<el-input
        class="addinput"
        placeholder="请输入购买类别"
        v-model="penson.type"
      ></el-input
      ><br />
      金额:<el-input
        class="addinput"
        placeholder="请输入购买金额"
        v-model="penson.balance"
      ></el-input
      ><br />
      <el-button :plain="true" class="btn" type="primary" @click="add"
        >添加</el-button
      >
      <el-button class="btn" type="info" @click="dialogTableVisible = false"
        >取消</el-button
      >
    </el-dialog>
    <!-- 修改弹出框 -->
    <el-dialog v-model="changed" title="请修改您的相关信息">
      <div class="demo-date-picker">
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker
            v-model="penson.date"
            type="date"
            placeholder="请选择你的日期"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
          />
        </div>
      </div>
      部门:
      <el-select
        v-model="penson.department"
        class="m-2"
        placeholder="请选择部门"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        /> </el-select
      ><br />
      数量:
      <el-input-number v-model="penson.quantity" :min="min" />
      <br />
      分类:<el-input
        class="addinput"
        placeholder="请输入购买类别"
        v-model="penson.type"
      ></el-input
      ><br />
      金额:<el-input
        class="addinput"
        placeholder="请输入购买金额"
        v-model="penson.balance"
      ></el-input
      ><br />
      <el-button :plain="true" class="btn" type="primary" @click="xiugai"
        >修改</el-button
      >
      <el-button class="btn" type="info" @click="changed = false"
        >取消</el-button
      >
    </el-dialog>
    <!-- 页面主体 -->
    <div class="container">
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        show-summary
        :summary-method="getSummaries"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40" />
        <el-table-column property="id" label="序号" />
        <el-table-column property="department" label="部门" />
        <el-table-column property="quantity" label="购买数量" />
        <el-table-column property="type" label="购买物品" />
        <el-table-column property="balance" label="购买金额" />
        <el-table-column property="time" label="购买时间" />
        <el-table-column label="修改">
          <el-button type="warning" @click="changed = true">修改</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElTable } from "element-plus";
import {
  getpropertymsgApi,
  addpropertymsgApi,
  delpropertymsgApi,
  searchpropertymsgApi,
} from "../api/index";

// 定义基本数据
interface User {
  id: string;
  department: string;
  quantity: string;
  type: string;
  balance: string;
  date: string;
}
const value = ref("");

const options = [
  {
    value: "采购部",
    label: "采购部",
  },
  {
    value: "技术部",
    label: "技术部",
  },
  {
    value: "人事部",
    label: "人事部",
  },
  {
    value: "项目部",
    label: "项目部",
  },
  {
    value: "财务部",
    label: "财务部",
  },
];
// 表格数据
const tableData: User[] = ref();
// 搜索框
let input = ref("");
let min = ref(1);
// 添加弹跳框
const dialogTableVisible = ref(false);
const changed: any = ref(false);
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
// 定义复选框
const multipleSelection = ref<User[]>([]);
const shortcuts = [
  {
    text: "今天",
    value: new Date(),
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};
// 定义发送后端的数据
let penson = reactive({
  id: "",
  department: "",
  quantity: "",
  type: "",
  balance: "",
  date: "",
});
// 全选复选框
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
// 合计
const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "";
      return;
    }
    if (index === 1) {
      sums[index] = "总计";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `$ ${values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0)}`;
    } else {
      sums[index] = "";
    }
  });

  return sums;
};
// 提交修改数据
const xiugai = () => {
  alert(111);
};
onMounted(() => {
  // 调用
  getpropertymsg();
});
// 获取支出表信息
const getpropertymsg = () => {
  let property = async () => {
    let res = await getpropertymsgApi();
    // 获取的数据
    tableData.value = res.data;
  };
  property();
};
// 发送数据给后端---添加
async function add() {
  let { department, quantity, type, balance, date } = penson;
  if (
    department == "" ||
    quantity == "" ||
    type == "" ||
    balance == "" ||
    date == ""
  ) {
    ElMessage({
      showClose: true,
      message: "您添加的数据不能为空哦！",
      type: "error",
    });
  }
  let res = await addpropertymsgApi(department, quantity, type, balance, date);
  console.log(res);

  if (res.data.code == 200) {
    // 隐藏弹出框
    dialogTableVisible.value = false;
    // 提示信息
    ElMessage({
      showClose: true,
      message: "添加数据成功",
      type: "success",
    });
    //调用
    getpropertymsg();
  }
}
// 删除
async function remove() {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      showClose: true,
      message: "请勾选您要删除的信息",
      type: "error",
    });
  }
  let res = await delpropertymsgApi(multipleSelection.value);
  // console.log(res);
  if (res.data.code == 200) {
    // 提示信息
    ElMessage({
      showClose: true,
      message: "删除数据成功",
      type: "success",
    });
    //调用
    getpropertymsg();
  }
}
// 搜索
let ser = async () => {
  if (input.value != "") {
    let res = await searchpropertymsgApi(input.value);
    console.log(res);
    tableData.value = res.data.results;
  } else {
    // 调用
    getpropertymsg();
  }
};
</script>

<style lang="less" scoped>
.container {
  text-align: center;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.addinput {
  margin-left: 0.8rem;
  width: 89%;
  margin-top: 0.5rem;
}
.btn {
  margin-top: 0.5rem;
  margin-left: 2.6rem;
}
</style>
